<section>
  <div class="row">
    <div class="col-md-4">
      <div class="card card-stats">
        <div class="card-body ">
          <div class="row">
            <div class="col-5">
              <div class="icon-big text-center icon-warning">
                  <i class="la la-play text-success"></i>
              </div>
            </div>
            <div class="col-7 d-flex align-items-center">
              <div class="numbers">
                <p class="card-category">Active Instances</p>
                <h4 class="card-title" *ngIf="!loadingActiveInstances">{{activeInstances}}</h4>
                <div class="spinner-border spinner-border-sm text-muted" *ngIf="loadingActiveInstances"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card card-stats">
        <div class="card-body ">
          <div class="row">
            <div class="col-5">
              <div class="icon-big text-center">
                  <i class="la la-pause text-warning"></i>
              </div>
            </div>
            <div class="col-7 d-flex align-items-center">
              <div class="numbers">
                <p class="card-category">Paused Instances</p>
                <h4 class="card-title" *ngIf="!loadingPausedInstances">{{pausedInstances}}</h4>
                <div class="spinner-border spinner-border-sm text-muted" *ngIf="loadingPausedInstances"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card card-stats">
        <div class="card-body ">
          <div class="row">
            <div class="col-5">
              <div class="icon-big text-center">
                  <i class="la la-stop text-danger"></i>
              </div>
            </div>
            <div class="col-7 d-flex align-items-center">
              <div class="numbers">
                <p class="card-category">Stopped Instances</p>
                <h4 class="card-title" *ngIf="!loadingStoppedInstances">{{stoppedInstances}}</h4>
                <div class="spinner-border spinner-border-sm text-muted" *ngIf="loadingStoppedInstances"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Public vs Private Instances</h4>
          <p class="card-category">Instances with Public IP Address</p>
        </div>
        <div class="card-body">
          <div class="loader" *ngIf="loadingInstancesPrivacyChart">Loading...</div>
          <canvas class="chart-circle mt-4 mb-3" id="instancesPrivacyChart"></canvas>
        </div>
        <div class="card-footer">
          <div class="legend">
            <i class="la la-circle text-primary"></i> Public Instances
            <i class="la la-circle text-success" style="margin-left: 10px"></i> Private Instances
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Compute Instance Machine Types</h4>
          <p class="card-category">Running VM Instances per Machine Type</p>
        </div>
        <div class="card-body">
          <div class="loader" *ngIf="loadingInstancesFamilyChart">Loading...</div>
          <canvas class="chart-circle mt-4 mb-3" id="instancesFamilyChart" style="max-height:275px"></canvas>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card card-stats">
        <div class="card-body ">
          <div class="row">
            <div class="col-5">
              <div class="icon-big text-center">
                <i class="devicon-windows8-original colored"></i>
              </div>
            </div>
            <div class="col-7 d-flex align-items-center">
              <div class="numbers">
                <p class="card-category">Windows Images</p>
                <h4 class="card-title" *ngIf="!loadingWindowsImages">{{windowsImages}}</h4>
                <div class="spinner-border spinner-border-sm text-muted" *ngIf="loadingWindowsImages"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card card-stats">
        <div class="card-body ">
          <div class="row">
            <div class="col-5">
              <div class="icon-big text-center">
                <i class="devicon-linux-plain"></i>
              </div>
            </div>
            <div class="col-7 d-flex align-items-center">
              <div class="numbers">
                <p class="card-category">Linux Images</p>
                <h4 class="card-title" *ngIf="!loadingLinuxImages">{{linuxImages}}</h4>
                <div class="spinner-border spinner-border-sm text-muted" *ngIf="loadingLinuxImages"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6">
      <div class="card card-stats">
        <div class="card-body">
          <div class="row">
            <div class="col-5">
              <div class="icon-big text-center">
                <img src="https://cdn.komiser.io/images/ovh/kube.png" class="ovh-logo" style="padding-bottom: 12px" />
              </div>
            </div>
            <div class="col-7 d-flex align-items-center">
              <div class="numbers">
                <p class="card-category">Kubernetes Clusters</p>
                <h4 class="card-title" *ngIf="!loadingKubernetesClusters">{{kubernetesClusters}}</h4>
                <div class="spinner-border spinner-border-sm text-muted" *ngIf="loadingKubernetesClusters"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="card card-stats">
        <div class="card-body">
          <div class="row">
            <div class="col-5">
              <div class="icon-big text-center">
                <img src="https://cdn.komiser.io/images/services/aws/kube.png" class="service-logo" style="padding-bottom: 12px" />
              </div>
            </div>
            <div class="col-7 d-flex align-items-center">
              <div class="numbers">
                <p class="card-category">Kubernetes Nodes</p>
                <h4 class="card-title" *ngIf="!loadingKubernetesNodes">{{kubernetesNodes}}</h4>
                <div class="spinner-border spinner-border-sm text-muted" *ngIf="loadingKubernetesNodes"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>